<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<head>
    <title>预约信息列表</title>
    <meta name="decorator" content="default"/>
    <link rel="stylesheet" href="${ctxStatic}/bootstrap-table/bootstrap-table.css">
    <script src="${ctxStatic}/bootstrap-table/bootstrap-table.js"></script>
    <script src="${ctxStatic}/bootstrap-table/locale/bootstrap-table-zh-CN.js"></script>
    <script src="${ctxStatic}/bootstrap-table/config.js"></script>
</head>
<body>
<ul class="nav nav-tabs">
    <!--默认不跳转-->
    <li class="active"><a href="javascript:void(0);">预约信息列表</a></li>
</ul>
<form id="searchForm" action="${ctx}/mywork/potentialAppointmentInfo/listAjaxData" method="post" class="breadcrumb form-search">
    <ul class="ul-form">
        <ul class="ul-form">
            <li><label>预约状态：</label>
                <select name="status" class="select-medium">
                    <option value="">全部</option>
                    <option value="1">已经结束</option>
                    <option value="2">即将开始</option>
                    <option value="3">尚未开始</option>
                </select>
            </li>
            <li class="btns">
                <button type="button" id="btnSearch" class="btn btn-primary">查询 &nbsp;<i class="icon-search icon-white"></i></button>
            </li>
            <li class="clearfix"></li>
        </ul>
    </ul>
</form>


<table id="contentTable" data-url="${ctx}/mywork/potentialAppointmentInfo/listAjaxData">
    <thead>
    <tr>
        <!--不需要选择请删除-->
        <th data-field="appointmentDate"  data-align="center">预约时间</th>
        <th data-field="potentialCustomerName"  data-align="center" data-formatter="potentialCustomerNameFormatter" >客户名称</th>
        <th data-field="descn"  data-align="center">预约事项描述</th>
        <th data-field="status"  data-align="center" data-formatter="statusFormatter" >预约状态</th>
        <th data-field="dateCreated"  data-align="center">创建时间</th>
        <th data-field="createUserName"  data-align="center">创建人</th>
        <th data-field="operate" data-align="center" data-formatter="operateFormatter" data-events="operateEvents" >操作</th>
    </tr>
    </thead>
</table>
<script type="text/javascript">
    $(document).ready(function() {
        closeTip();

        //简化版 使用bootstrap风格 2选1 BTConfigSimple的样式更简单
        $("#contentTable").bootstrapTable(
                $.fn.BTConfigSimple({
                    pageList: [30, 50, 100],
                    pageSize: 30,
                    sortName: "a.appointmentDate",
                    sortOrder: "desc"
                }));

        $("#btnSearch").click(function () {
            refresh();
        });
        $(".addTab").live("click", function () {
            return window.parent.addTab($(this));
        });
    });
    //全局函数部分
    function refresh(){
        $("#contentTable").bootstrapTable(
                'refresh',
                $("#searchForm").refreshByForm());
    }

    function potentialCustomerNameFormatter(value, row, index) {
        return "<a class='addTab' href='"+ctx+"/mywork/potentialCustomer/detail?id="+row.potentialCustomerId+"' target='mainFrame'>"+value+"</a>";
    }

    function statusFormatter(value, row, index) {
        if (value.toUpperCase()=="即将开始") {
            var array = [];
            array.push('<span style="color: red;">'+value+'</span>');
            return array.join('');
        } else {
            return value;
        }
    }
    function operateFormatter(value, row, index){
        var array = [];
        array.push('<a class="edit" href="${ctx}/mywork/potentialAppointmentInfo/form?id='+row.id+'" title="编辑/查看">');
        array.push('<i class="icon icon-edit"></i>');
        array.push('</a>');
        <shiro:hasPermission name="mywork:potentialAppointmentInfo:edit">
        array.push('  ');
        array.push('<a class="remove" href="javascript:void(0)" title="删除">');
        array.push('<i class="icon icon-remove"></i>');
        array.push('</a>');
        </shiro:hasPermission>
        return array.join('');
    }

    var operateEvents = {
        'click .remove': function (e, value, row, index) {
            confirmx("您确认要删除记录[" + row.potentialCustomerName + "]?",
                     function () {
                         $.ajax({
                             url: "${ctx}/mywork/potentialAppointmentInfo/delete",
                             type: "post",
                             data: {id: row.id},
                             dataType: "json",
                             success: function (data) {
                                 if (data.state == true) {
                                     showTip(data.message);
                                     refresh();
                                 } else {
                                     alertx(data.message);
                                 }
                             },
                             error: function (data, state, error) {
                                 alertx(data.responseText, null, '请求错误');
                             }
                         });});
        }
    };

</script>

</body>
</html>